<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{count}}
      <son-component></son-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/vuex@3.1.3/dist/vuex.js"></script>
    <script>
      Vue.use(Vuex);
      //在项目中仓库只能有一个，每个仓库只有一个状态对象，那意味着状态对象也只能有一个
      var store = new Vuex.Store({
        state: { count: 10 },
      });
      console.log(store.state);
      //一旦在根实例中注入了store属性，那么在所有的组件中都可以访问this.$store
      var vm = new Vue({
        store,
        el: "#app",
        computed: {
          //在组件中获取仓库的状态最好的使用计算属性，可以返回仓库中的状态
          //因为store中的状态是响应式的，所以以后当仓库的状态发生变化的时候，会重新计算计算属性
          //而计算属性如果变了组件会重新刷新，页面也会跟着刷新
          count() {
            return this.$store.state.count;
          },
        },
        components: {
          "son-component": {
            computed: {
              number() {
                //在子组件里就可以获取这个this.$store属性
                return this.$store.state.count;
              },
            },
            template: `<div>{{number}}</div>`,
          },
        },
      });
    </script>
  </body>
</html>

/**
老师什么时候用computed 什么时候用methods
计算属性，它是为了在模板里显示一个经过计算得到的值，并且可以缓存
methods是方法，它不需要返回值，只是执行一段业务逻辑
**
